<template>
  <div class="bz">
    <!-- 头部导航 -->
    <div class="navbar">
      <img class="tb" src="/img/fh.png" alt="" @click="onClick" />
      <span>服务备注</span>
    </div>
    <div class="kkk"></div>
    <!--  -->
    <div class="bz-one">
      <div class="bz-two">
        <div class="bz-two1">
          <p>期望的钥匙交接方式</p>
          <div class="bz-two-one">
            <span
              @click="ConnectCur(item.index)"
              :class="item.index == keyConnectCur ? 's1-cur' : 's1'"
              v-for="item in keyConnect"
              :key="item.index"
              >{{ item.keyname }}</span
            >
          </div>
        </div>
        <div class="bz-two1">
          <p>期望的钥匙归还方式</p>
          <div class="bz-two-one">
            <span
              @click="GiveBackCur(item.index)"
              :class="item.index == keyGiveBackCur ? 's1-cur' : 's1'"
              v-for="item in keyGiveBack"
              :key="item.n"
              >{{ item.keygivebackname }}</span
            >
          </div>
        </div>
        <div class="bz-two1">
          <p>期望的上门服务时间段</p>
          <div class="bz-two-one">
            <span
              @click="doorCur(item.index)"
              :class="item.index == DoorToDoorCur ? 's1-cur' : 's1'"
              v-for="item in DoorToDoor"
              :key="item.i"
              >{{ item.doorTime }}</span
            >
          </div>
        </div>
      </div>
      <!-- 猫粮位置 -->
      <div class="bz-two-two">
        <p>猫粮位置</p>
        <!-- 头像上传 -->
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="bz-two-one">
          <span
            @click="footCur(item.index)"
            :class="item.index == catfootCur ? 's1-cur' : 's1'"
            v-for="item in catFoot"
            :key="item.index"
            >{{ item.catfootname }}</span
          >
        </div>
        <p class="p1">猫粮喂食量</p>
        <textarea
          name=""
          placeholder="选填"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <!-- 猫砂位置 -->
      <div class="bz-two-two">
        <p>猫砂位置</p>
        <!-- 头像上传 -->
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess1"
          :before-upload="beforeAvatarUpload" 
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="bz-two-one">
          <span
            @click="litteCur(item.index)"
            :class="item.index == catlitteCur ? 's1-cur' : 's1'"
            v-for="item in catLitte"
            :key="item.index"
            >{{ item.catlittename }}</span
          >
        </div>
        <p class="p1">猫砂用量</p>
        <textarea
          name=""
          placeholder="选填"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <!-- 饮用水位置 -->
      <div class="bz-two-two">
        <p>饮用水位置</p>
        <!-- 头像上传 -->
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="bz-two-one">
          <span
            @click="waterCur(item.index)"
            :class="item.index == catwaterCur ? 's1-cur' : 's1'"
            v-for="item in catWater"
            :key="item.index"
            >{{ item.catwatername }}</span
          >
        </div>
        <p class="p1">饮用水喂食量</p>
        <textarea
          name=""
          placeholder="选填"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <!-- 其他注意事项 -->
      <div class="bz-three">
        <p>其他注意事项</p>
        <textarea
          placeholder="其他注意事项"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </div>
      <!-- 其他服务事项 -->
      <div class="bz-four">
        <p>其他服务事项</p>
        <p>需要喂药</p>
        <el-switch
          v-model="value"
          active-color="#f2f2f2"
          inactive-color="#1989fa"
        >
        </el-switch>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-button
        color="#f8e176"
        type="warning"
        text="保存"
        @click="onClickLeft"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      imageUrl: "",
      //交接钥匙
      keyConnect: [
        { index: 0, keyname: "密码锁" },
        { index: 1, keyname: "丰巢存件" },
        { index: 2, keyname: "面交" },
        { index: 3, keyname: "快递" },
        { index: 4, keyname: "闪送/美团跑腿" },
        { index: 5, keyname: "放在指定位置" },
        { index: 6, keyname: "其他" },
      ],
      keyConnectCur: 0, //钥匙交接默认高亮
      //归还钥匙
      keyGiveBack: [
        { index: 0, keygivebackname: "密码锁" },
        { index: 1, keygivebackname: "放在家里" },
        { index: 2, keygivebackname: "丰巢存件" },
        { index: 3, keygivebackname: "面交" },
        { index: 4, keygivebackname: "快递" },
        { index: 5, keygivebackname: "闪送/美团跑腿" },
        { index: 6, keygivebackname: "放在指定位置" },
        { index: 7, keygivebackname: "其他" },
      ],
      keyGiveBackCur: 0, //钥匙归还默认高亮
      //上门服务
      DoorToDoor: [
        { index: 0, doorTime: "均可" },
        { index: 1, doorTime: "优先上午" },
        { index: 2, doorTime: "优先下午" },
        { index: 3, doorTime: "优先晚上" },
      ],
      DoorToDoorCur: 0, //钥匙交接默认高亮
      //猫粮
      catFoot: [
        { index: 0, catfootname: "添加猫粮" },
        { index: 1, catfootname: "更换新宠粮" },
        { index: 2, catfootname: "无需添加宠粮" },
      ],
      catfootCur: 0,
      //猫砂
      catLitte: [
        { index: 0, catlittename: "添加猫砂" },
        { index: 1, catlittename: "更换新猫砂" },
        { index: 2, catlittename: "仅需清洁" },
      ],
      catlitteCur: 0,
      //饮用水
      catWater: [
        { index: 0, catwatername: "添加饮用水" },
        { index: 1, catwatername: "更换新饮用水" },
        { index: 2, catwatername: "无需添加饮用水" },
      ],
      catwaterCur: 0,
    };
  },
  methods: {
     onClick(){
            this.$router.go(-1)
       },
    onClickLeft() {
      this.$router.push("/CatShopping");
    },
    //选中钥匙交接方式
    ConnectCur(index) {
      this.keyConnectCur = index;
    },
    //选中钥匙归还方式
    GiveBackCur(index) {
      this.keyGiveBackCur = index;
    },
    //选中上门服务时间
    doorCur(index) {
      this.DoorToDoorCur = index;
    },
    //猫粮喂食
    footCur(index) {
      this.catfootCur = index;
    },
    //猫砂
    litteCur(index) {
      this.catlitteCur = index;
    },
    //饮用水
    waterCur(index) {
      this.catwaterCur = index;
    },
    //猫粮图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess1(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
 ::v-deep .el-upload .el-upload--text{
     width: 100px;
 height: 100px;
 overflow: hidden;
 position: relative;
 }
 ::v-deep .avatar {
 position: absolute;
 width: 100%;
left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 }
.bz{
    width: 100%;
    height: 480vw;
    background-color: #f2f2f2;
    .bz-one{
        padding: 10px;
        .bz-two{
            width: 100%;
            height: 85vw;
            background-color: white;
            .bz-two1{
                  p{ 
                    width: 50vw; height: 7vw; line-height: 7vw;
                    font-size: 14px;
                    position: relative;
                    top: 4vw; left: 3vw;
                    // background-color: palegoldenrod;
                }
                 .bz-two-one{

                    width: 95vw;
                    height: 23vw;
                    margin-left: 3vw;
                    // background-color: aqua;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content:flex-start;
                    position: relative;
                    top: -2vw; left: -3vw;
                     .s1{
                        position: relative;
                        top: 7vw; left: 3vw;
                        display: inline-block;
                        height: 30px; 
                        background-color: #f2f2f2;
                        color: #c7c5cd;
                        text-align: center; line-height: 20px;
                        padding: 5px;
                        border-radius: 8px;
                        border: 1px solid #fff;
                        margin-right: 10px;
                    }
                    .s1-cur{
                        position: relative;
                        top: 7vw; left: 3vw;
                        display: inline-block;
                        height: 30px; 
                        background-color: #efedfd;
                        color: #8973e4;
                        text-align: center; line-height: 20px;
                        padding: 5px;
                        border: 1px solid #8973e4;
                        border-radius: 8px;
                        margin-right: 10px;
                    }
                }
            }
           
         
        }
        .bz-two-two{
            margin-top: 2.5vw;
             width: 100%;
            height: 77vw;
            background-color: white; 
            
            p{
                 width: 50vw; height: 7vw; line-height: 7vw;
                 font-size: 14px;
                 position: relative;
                 top: 3vw; left: 3vw;
            }
            .p1{
                 width: 50vw; height: 7vw; line-height: 7vw;
                 font-size: 14px;
                 position: relative;
                 top: -4vw; left: 3vw;
                //  background-color: #8973e4;
            }
             textarea{
                 width: 60vw; height: 10vw;
                  position: relative;
                 top: -3vw; left: 3vw;
                 padding-left: 10px;
                 line-height: 8.2vw;
                 font-size: 14px; 
                 border: 1px solid #f0f0f0;
             }
              .bz-two-one{

                    width: 95vw;
                    height: 23vw;
                    margin-left: 3vw;
                    // background-color: aqua;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content:flex-start;
                    position: relative;
                    top: -2vw; left: -3vw;
                     .s1{
                        position: relative;
                        top: 10vw; left: 3vw;
                        display: inline-block;
                        height: 30px; 
                        background-color: #f2f2f2;
                        color: #c7c5cd;
                        text-align: center; line-height: 20px;
                        padding: 5px;
                        border-radius: 8px;
                        border: 1px solid #fff;
                        margin-right: 10px;
                    }
                    .s1-cur{
                        position: relative;
                        top: 10vw; left: 3vw;
                        display: inline-block;
                        height: 30px; 
                        background-color: #efedfd;
                        color: #8973e4;
                        text-align: center; line-height: 20px;
                        padding: 5px;
                        border: 1px solid #8973e4;
                        border-radius: 8px;
                        margin-right: 10px;
                    }
                }
        }
        .bz-three{
             margin-top: 2.5vw;
             width: 100%;
            height: 52vw;
            background-color: white; 
             p{
                 width: 50vw; height: 7vw; line-height: 7vw;
                 font-size: 14px;
                 position: relative;
                 top: 3vw; left: 3vw;
            }
             textarea{
                 width: 88vw; height: 38vw;
                  position: relative;
                 top: 4vw; left: 3.5vw;
                 padding-left: 10px;
                 line-height: 8.2vw;
                 font-size: 14px; 
                 border: 1px solid #f0f0f0;
                 border-radius: 10px;
                 background-color: #f2f2f2;
             }
        }
        .bz-four{
            margin-top: 2.5vw;
            width: 100%;
            height: 25vw;
            background-color: white; 
             p{
                 width: 50vw; height: 7vw; line-height: 7vw;
                 font-size: 14px;
                 position: relative;
                 top: 3vw; left: 3vw;
                //  background-color: #8973e4;
                 margin-bottom: 5px;
            }
           
        }
    }
}
 .navbar{
   width: 100%;
   height: 13vw;
   position: fixed;
   top: 0; left: 0;
   z-index: 10;
   background-color: white;
   text-align: center;
   line-height: 13vw;
   // background-color: aqua;
   img{  
       position: relative;
       top: 0vw; left: -35vw;
       width: 25px;
       height: 25px;
       display: inline-block;
   }
}
.kkk{
   height: 13vw;
}
 ::v-deep .el-switch__core{
                position: relative;
                left: 80vw; top: -4.5vw;
            }
//图片上传
 ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #f7f7f7;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    left: 3vw; top: 6vw;
    overflow: hidden;
    background-color: #f7f7f7;
    border-radius: 10px;
  }
 ::v-deep .avatar-uploader-icon {
    font-size: 40px;
    color: #9e9e9e;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: relative;
    left: -1vw;
  }
 ::v-deep .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>